<template>
    <section>
        <a-modal v-model="loginModalShow" :width="640" style="padding: 0px;" :title="null" :footer="null" @cancel="loginModalCancel" class="login-modal clearfix" :zIndex="zIndex">
            <div class="clearfix">
                <div class="left left-box">
                    <h2>登 录</h2>
                    <a-form layout="horizontal" :form="form" @submit="loginFN">
                        <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" hasFeedback>
                            <a-input type="number" placeholder='请输入手机号' @keyup.enter.native="loginFN"
                                     v-decorator="['phone', {rules: [
                                        {required: true, validator: this.phone_validation, trigger: 'blur' },
                                    ]}]">
                                <i slot="prefix" class="iconfont icon-dianhua" style="color:rgba(0,0,0,.25)"></i>
                            </a-input>
                        </a-form-item>
                        <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }"  hasFeedback>
                            <a-input-search  placeholder='短信验证码' type="number" @keyup.enter.native="loginFN" @search="sendCode"
                                             v-decorator="['code', {rules: [
                                                { required: true, validator: this.code_validation, trigger: 'blur' },
                                            ]}]">
                                <i slot="prefix" class="iconfont icon-icon_sms" style="color: rgba(0,0,0,.25)"></i>
                                <a-button type="primary" slot="enterButton" :disabled="codeDisabled">{{ codeText }}</a-button>
                            </a-input-search>
                        </a-form-item>
                        <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" >
                            <a-button htmlType="submit" type="primary" size="large" class="LgnBtn" :loading="submitLoginLoading">
                                <i class="iconfont icon-denglu"></i> 登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                    <div class="footer">
                        <p>还没有账号？
                            <a @click="cellRegisterFather">立即注册</a>
                        </p>
                    </div>
                </div>
                <div class="left right-box">
                    <ul>
                        <li>
                            <p>
                               <span>
                                   <img src="/static/img/HMYS-dingyuehao.jpg" alt="">
                               </span>
                            </p>
                            <p>华美优胜官方订阅号</p>
                        </li>
                        <li>
                            <p>
                               <span>
                                   <img src="/static/img/HMYS-fuwuhao.jpg" alt="">
                               </span>
                            </p>
                            <p>华美优胜官方服务号</p>
                        </li>
                        <li>
                            <h3>关注华美优胜官方微信公众号获取更多海外热点资讯</h3>
                        </li>
                    </ul>
                </div>
            </div>
        </a-modal>
    </section>
</template>

<script>
    let phoneReg = /^(1)[3|4|5|6|7|8|9](\d){9}$/;

    export default {
        data() {
            return {
                zIndex: 2222222222,//zIndex是10位数，因为美恰的广告弹窗的zIndex是2147483647
                loginModalShow: false,//公共登录modal框是否显示隐藏
                form: this.$form.createForm(this),
                verificationCode: '', //验证码的验证串
                codeTime: 0,  //获取验证码倒计时
                codeText: '获取验证码',  //获取验证码按钮的提示文本
                codeDisabled: false, //获取验证码按钮的状态
                submitLoginLoading: false,//提交button的loading状态

            }
        },
        computed: {
        },
        mounted() {
            this.preventRefreshCodeTime();  //防刷新：检测是否存在倒计时计算localStorage.codeTime

            //监测父组件公共组件header传过来的登录框状态
            this.$on('handleLoginModal', () => {
                this.loginModalShow = true;
            });
        },
        methods: {
            //防刷新：检测是否存在倒计时计算localStorage.codeTime
            preventRefreshCodeTime(){
                if (localStorage.codeTime) {
                    this.codeTime = parseInt(localStorage.codeTime);
                    this.codeText = this.codeTime + "s后重新获取";
                    this.codeDisabled = true;
                    let resend = setInterval(() => {
                        this.codeTime--;
                        if (this.codeTime > 0) {
                            this.codeText = this.codeTime + "s后重新获取";
                            localStorage.codeTime = this.codeTime;
                        } else {
                            localStorage.removeItem('codeTime');
                            clearInterval(resend);
                            this.codeText = '获取验证码';
                            this.codeDisabled = false;
                        }
                    }, 1000);
                }
            },
            //发送验证码
            sendCode() {
                let phone = this.form.getFieldValue('phone');
                // 手机号正则验证
                if (phoneReg.test(phone)) {// 手机号符合验证
                    this.$get('sms/login/' + phone).then(res => {
                        if (res.status == 0) {
                            this.codeTime = 60;
                            this.codeDisabled = true;
                            this.codeCountdown();
                            this.verificationCode = res.data;
                            this.$message.success('发送成功，请您耐心等待短信通知。');
                        }else{
                            this.$message.warning(res.msg);
                        }
                    })
                } else {
                    this.$message.error('手机号格式错误。');
                }
            },
            //验证码倒计时计算
            codeCountdown() {
                if (this.codeTime > 0) {
                    this.codeTime--;
                    this.codeText = this.codeTime + "s后重新获取";
                    setTimeout(this.codeCountdown, 1000);
                    localStorage.codeTime = this.codeTime;
                } else {
                    this.codeTime = 0;
                    this.codeText = "获取验证码";
                    this.codeDisabled = false;
                    localStorage.removeItem('codeTime');
                }
            },
            // 提交登录
            loginFN(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.submitLoginLoading = true;
                        this.$post('/login', {
                            phone: values.phone,
                            msg: values.code,
                            msgId: this.verificationCode
                        }).then(res => {
                            this.submitLoginLoading = false;
                            if (res.status == 0) {
                                this.loginModalShow = false;
                                //设置全局使用————登录用户的个人信息
                                this.$store.commit('set_user', {
                                    name: res.data.name,
                                    headPhoto: res.data.photo,
                                });

                                this.setLocalStorage('userName', res.data.name);
                                this.setLocalStorage('userHeadPhoto', res.data.photo);

                                window.location.reload();
                                // this.$router.push({path: '/'});
                            }else{
                                this.$message.warning(res.msg);
                            }
                        })
                    }else{
                        this.$message.error('手机号或验证码格式错误，请检查并重新输入！');
                    }
                })
            },
            //公共登录modal框关闭时触发
            loginModalCancel(){
                this.loginModalShow = false;
            },
            // 子组件中触发父组件方法cellRegisterSon，以调用注册modal框
            cellRegisterFather(){
                this.$emit('cellRegisterSon');
                this.loginModalShow = false;
            },

        },
        components: {}
    }
</script>

<style  lang="less" type="text/less">
    body {
        .login-modal {
            top: 80px;
            .ant-modal-body {
                padding: 0;
                >div{
                    min-height: 450px;
                    >.left-box{
                        box-sizing: border-box;
                        padding: 0px 40px 0 40px;
                        width: 65%;
                        >h2{
                            text-align: center;
                            font-size: 22px;
                            line-height: 60px;
                            padding: 30px 0px 20px;
                        }
                        .ant-form-item{
                            margin-bottom: 20px;
                            .ant-input,
                            .ant-input-search-button{
                                height: 40px;
                                line-height: 40px;
                            }
                            .LgnBtn{
                                width: 100% !important;
                            }
                        }
                        > .footer {
                            > p {
                               padding-right: 20px;
                                text-align: right;
                                > a {
                                    color: #27aee5;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                    >.right-box{
                        width: 35%;
                        padding: 20px 0;
                        box-sizing: border-box;
                        background: url("/static/img/login-register-rightbox-bg.jpg") no-repeat center center;
                        background-size: cover;
                        min-height: 450px;
                        >ul{
                            >li{
                                >p{
                                    text-align: center;
                                    color: #fff;
                                    line-height: 38px;
                                    >span{
                                        display: inline-block;
                                        background: #fff;
                                        padding: 10px;
                                        >img{
                                            width: 140px;
                                        }
                                    }

                                }
                            }
                            >li:last-of-type{
                                padding: 0 15px;
                                >h3{
                                    background: #ee5e55;
                                    border-radius: 5px;
                                    font-size: 13px;
                                    color: #fff;
                                    padding: 5px;
                                    text-align: center;
                                    z-index: 2;
                                }
                            }
                        }
                    }
                }
            }
            .ant-modal-close{
                border-radius: 50%;
                width: 40px;
                height: 40px;
                top: -20px;
                right: -20px;
                background: #fefefe;
                >.ant-modal-close-x{
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                }
            }
        }
    }
</style>

